// 设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net';

// 获取元素
const form = document.querySelector('#bookForm');
const tb = document.querySelector('#tb');
const serach = document.querySelector('#search-for');

// 进入渲染页面
// 封装渲染函数
const renderBooks = async () => {
    // 发起请求，请求渲染数据
    const {data: res} = await axios({
      url: '/api/getbooks',
      method: 'GET',
    })
    // axios
    //   .get('/api/getbooks')
    //   .then(({data: res}) => {
        const {data} = res
        // console.log(data);

        const html = data.map(item => {
            return `
            <tr>
              <td>${item.id}</td>
              <td>${item.bookname}</td>
              <td>${item.author}</td>
              <td>${item.publisher}</td>
              <td><a href="#" data-id="${item.id}">删除</a></td>
            </tr> `
        }).join('')

        // 渲染真实dom
        tb.innerHTML = html
      // })
}


// 页面加载，调用渲染函数渲染页面
renderBooks()

form.addEventListener('submit', async function (e) {
    // 阻止默认提交事件
    e.preventDefault()

    // 使用serialize插件获取表单数据
    const data = serialize(form, {hash: true})
    console.log(data);

    // 发起添加请求
    const {data: res} = await axios({
      url: '/api/addbook',
      method: 'POST',
      data,
    })
    // axios
    //   .post('/api/addbook', data)
    //   .then(({data: res}) => {
        alert(res.msg)

        if(res.status !== 201) return

        // 添加后清空输入框
        this.reset()

        // 成功添加后重新渲染页面
        renderBooks()
      // })
});


// 删除事件
tb.addEventListener('click', async function(e) {
    if(e.target.tagName === 'A') {
        // 获取自定义属性id
        // console.log(e.target.dataset.id);
        let id = e.target.dataset.id

        // 发起删除请求
        const {data: res} = await axios({
          url: '/api/delbook?id=' + id,
          method: 'GET',
        })
        // axios
        //   .get('/api/delbook?id=' + id)
        //   .then(({data: res}) => {
            // 删除完以后重新刷新
            renderBooks()
          // })
    }
})

// 搜索按钮
serach.addEventListener('click', async function (e) {
  // 阻止默认提交事件
  e.preventDefault()
  // 使用serialize插件获取表单数据
  const value = serialize(form)
  // console.log(value);

  // 发送请求
  const {data: res} = await axios({
    url: '/api/getbooks?' + value,
    method: 'GET',
    params: 'data',
  })
  const data = res.data
  console.log(data);
  tb.innerHTML = data.map((item) => {
    return `
    <tr>
      <td>${item.id}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td><a href="#" data-id="${item.id}">删除</a></td>
    </tr> `
  }).join('')
  form.reset()
})